<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Isometric</title>

    <script src="utils.js"></script>
    <script src="player.js"></script>
    <script src="map.js"></script>
    <style>

    </style>
</head>
<body>
<canvas tabindex="0" id="game" width="640px" height="480px" style="background-color: black">

</canvas>
</body>
<script>

    /**
     * https://gamedevelopment.tutsplus.com/tutorials/creating-isometric-worlds-a-primer-for-game-developers--gamedev-6511
     *
     **/

    const C_Tile_Width = 32;
    const C_Tile_Height = 32;  // 这个高度要和 实际的 tile 高度相同
    const Aspect = 2; // 实际的tile width / height

    loadTiled(1,'imgs/tile_1.png');

    let canvas,ctx;
    let Width,Height;
    let map;
    let player = new Player();
    window.onload = function () {
        console.log('hello...');
        canvas = document.getElementById('game');
        ctx = canvas.getContext('2d');
        canvas.focus();
        Width = canvas.width = canvas.clientWidth;
        Height = canvas.height = canvas.clientHeight;

        map = new Map();
        canvas.addEventListener('click',onMouseClick,false);
        
        window.addEventListener('keydown',onKeyDown,false);

        loop();
    };
    
    function onKeyDown() {
        
    }

    function onMouseClick(event) {
        let x = event.clientX;
        let y = event.clientY;

        let xInCanvas = x - canvas.offsetLeft;
        let yInCanvas = y - canvas.offsetTop;
        // console.log(`x:${xInCanvas},y:${yInCanvas}`);

        let tileIdxs = getTiledIndex(xInCanvas,yInCanvas);
        map.selectTile(tileIdxs.x,tileIdxs.y);
    }

    function loop() {
        requestAnimationFrame(loop);

        update();

        ctx.clearRect(0,0,Width,Height);
        // ctx.save();
        map.draw(ctx);
        player.draw(ctx);
        // ctx.restore();
    }

    function update() {
        player.update();
    }

</script>
</html>
